<template >
<view  class="container">
 <div style="height:44px;width:100vw;background:#fff;"></div>
 
    <div style="background:#fff;width:100%;">
        
          <view class="search">
                <img  @click="GetEmw" style="width:6vw;height:6vw;margin-right:3vw;" src="/static/images/ewmImg.png"   alt="">  
                <navigator  hover-class="none" url="/pages/search/search" class="input">
                    <img class="icon"/>
                    <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
                </navigator>
            </view>      
    </div>
   
   
  <swiper class="banner" indicatorDots="true" autoplay="true" interval="2200" duration="1000" circular indicatorActiveColor='#FD6D1F'>
    <swiper-item v-for="item of items.banner" :key="item.id">
      
        <img @click="toBanner(item)" :src="item.advertImg"/>
     
      
      
    </swiper-item>
  </swiper>


    <div id="home" class='home'>
  	 
       <div class='navigations'>
                <ul >
                    <li @click='activity(item,index)' v-for="(item,index) in navigationList" :key='index' >
                        <img :src="item.img" alt="">
                        <p>{{item.text}}</p>
                    </li>
                </ul>
       </div>

       <div class="topic">
           <img :src="topic" alt="">
       

               <swiper   
               style="height:55px;width:50vw; margin-left:5vw;;line-height:55px;font-size:15px;color:#333333;float:left"
                 indicatordots="false"  autoplay="true" vertical="false" circular   interval="2500" duration="1000">
                        <swiper-item v-for="(itemData,index) in items.question" :key="index">
                        <navigator  hover-class="none" url='/pages/index/topic'>
                           <div   class="notice-container" style="flex:1;padding:0">
									<p class="title-container">{{itemData.question}}</p>
								 
									</div>
                        </navigator>
                        
                        </swiper-item>
                    </swiper>
                     <navigator  hover-class="none" url='/pages/index/topic'  >
                     <span class="titleSpan"> 
                         更多<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;float:right" class="goRight" src="/static/images/go.png"/>
                       
                         </span>
                          </navigator>
                   
       </div>
    
        <div class="daysNew">
             <navigator  hover-class="none" url='/pages/ucenter/goodsList?title=天天换新' >
            <div class="title">

                <span> <img  style="width:20px;height:17px;margin-top:1.5px;" class="icon" src="/static/images/clothes.png"/>  天天换新</span>
                <span>更多<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>
            </div>
             </navigator>
            <div class='ulBox'>
                  <ul >
                        
                        <li   v-for="(item,index) in items.newProduct" :key="index">
                             <navigator  hover-class="none" :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                    <img :src="item.productThumb" alt="">
                                    <p>￥{{item.price}}</p>
                              </navigator>
                        </li>
                       
                    </ul>
            </div>
            
       </div>
          <div v-if='items.berserkProduct.length>0' class="daysNew">
            <div class="title">
                <span>	 <img style="width:75px;display:blick;height:40px;margin-left:15px;" :src="snapup" alt=""> </span>
                <!-- <span style="margin-right:5vw;">距离本场结束 </span> -->
            </div>
            <div class='ulBox'>
                  <ul style="width:380px">
                        <li   v-for="(item,index) in items.berserkProduct" :key="index">
                             <navigator  hover-class="none" :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                    <img :src="item.productThumb" alt="">
                                    <p>￥{{item.price}}</p>
                             </navigator>
                        </li>
                    </ul>
            </div>
            
       </div> 
          <div class="daysNew">
               <navigator  hover-class="none" url='/pages/ucenter/manufacturerList?title=精选品牌' >
            <div class="title">
                <span style="padding-left:15px;">精选品牌</span>
                <span>更多<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>
            </div>
               </navigator>
            <div class='ulBox'>
                  <ul>
                        <li   v-for="(item,index) in items.niceBrand" :key="index">
                             <!-- <navigator  hover-class="none" :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb"> -->
                             <navigator  hover-class="none" url= '/pages/goods/goods?productId=c0269eaf0463410d992bc6d7bdbf920e&shareId=314825108d764966974f1e50136a3fa9'>

                                    <img :src="item.productThumb" alt="">
                                    <p style="color:#333333; font-weight: 100;">{{item.brandName}}</p>
                             </navigator>
                        </li>
                    </ul>
            </div>
            
       </div>
        <div class="age">
            <div class="title">
                <span style="padding-left:15px;">年龄段分类</span>
              
            </div>
            
                  <ul>
                        <li v-for="(item,index) in ageImgList" :key="index">
                             <navigator  hover-class="none" :url=" '/pages/ucenter/goodsList?ageN=1&age='+index+'&title='+item" >
                            <img :src="'../../static/images/age'+index+'.png' " alt="">
                             <p>{{item}}</p>
                             </navigator>
                        </li>
                    </ul>
          
            
       </div>
          <div class="daysNew">
               <navigator  hover-class="none" url='/pages/ucenter/manufacturerList?title=每日好厂' >
            <div class="title">
                <span style="padding-left:15px;">每日好厂</span>
                 <span>更多<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>
            </div>
               </navigator>
            <div class='ulBox'>
                  <ul>
                        <li v-for="(item,index) in items.niceStoreToday" :key="index">
                            <navigator  hover-class="none" :url="'/pages/merchants/merchants?storeId=' + item.storeId ">
                            <img :src="item.productThumb" alt="">
                            <p style="color:#333333; font-weight: 100;">{{item.storeName}}</p>
                            </navigator>
                        </li>
                    </ul>
            </div>
            
       </div>
       <div class="select">
           <div class="title">精选宝贝</div>   
            <ul>
                         <li    v-for="(item,index) in selectList" :key="index"> 
                             <navigator  hover-class="none"   :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div   class='pic'>
                                                <img style="width:44vw;height:44vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div class='bottom'>
                                        <p style="text-indent: 0;"  >{{item.productName }}</p>
                                        <p class='MBprice'> <span>￥{{item.price}} </span> <span>{{item.orderCount}}人已付款</span> </p>
                                            
                                </div>
                             </navigator>
                            </li>
              
                    </ul>
       </div>
       
  </div> 
</view>
</template>

<script>
// import api from '@/utils/api'

import {  mapActions } from 'vuex'
import api from '@/utils/api'
var app = getApp();
export default {
  data () {
    return {
        loadingBt:false,
        indicatorDots:false,
      items:'',
      orderId: 1,
      page:1,
      expressInfo: {},
       selectList:[],
      expressTraces: [1,2,3,4,5,6],
        topic:'/static/images/topic.jpg',
         snapup:'/static/images/snapup.jpg',
            navigationList:[
                  {
                        img:'/static/images/home_buttom_ppg@2x.png',text:'品牌馆'
                    },
                    {
                        img:"/static/images/home_buttom_clg@2x.png",text:'潮流馆'
                    },
                  
                     {
                        img:'/static/images/home_buttom_tttj@2x.png',text:'天天特价'
                    },
                    {
                        img:'/static/images/home_buttom_dhh@2x.png',text:'订货会'
                    },
                     {
                        img:'/static/images/home_buttom_jbk@2x.png',text:'聚爆款'
                    },
                    {
                        img:'/static/images/home_buttom_tph@2x.png',text:'童品汇'
                    },
                     {
                        img:'/static/images/home_buttom_wph@2x.png',text:'尾品汇'
                    },
                    {
                        img:'/static/images/home_buttom_pt@2x.png',text:'拼团'
                    },
                    {
                        img:'/static/images/home_buttom_fq@2x.png',text:'跳尾货'
                    },
                    {
                        img:'/static/images/home_buttom_qb@2x.png',text:'产品类别'
                    }

            ],
            ageImgList:['婴童','女小童','女中童','女大童','男小童','男中童','男大童','中性'],
            banner:'',
            show:''
    }
  },
  created(){
    this.ax();
        let self=this;
        this.getselectList()
  },
  computed: {
    
  },
  onPageScroll(){//滚动监听
     
  },
  onReachBottom(){
      // 底部加载
    if(this.loadingBt){
        this.getselectList()
    }
    
  },


  methods: {
      activity(val,index){
          console.log(index)
        //   if(index==9){
        //       wx.navigateTo({
        //       url: '/pages/index/catalog' 
        //     });
        //   }
          switch(index)
        {
        case 9:
         wx.navigateTo({
              url: '/pages/index/catalog' 
            });
        break;
        case 0:
         wx.navigateTo({
              url: '/pages/index/BrandPavilion?title=品牌馆&type=3' 
            });
        break;
           case 1:
         wx.navigateTo({
              url: '/pages/index/trendPavilion?title=潮流馆&type=2' 
            });
        break;
         case 4:
            wx.navigateTo({
                url: '/pages/index/Detonationmodel?title=聚爆款' 
                });
        break;
        case 5:
            wx.navigateTo({
                url: '/pages/index/remit?title=童品汇' 
                });
        break;
         case 6:
            wx.navigateTo({
                url: '/pages/index/remit?title=尾品汇' 
                });
        break;
        default:
        
        }
          
      },
    toBanner(item){
        console.log(item.linkUrl.slice(0,7))
        if(item.linkUrl.slice(0,7)=='StoreId'){
             wx.navigateTo({
              url: '/pages/merchants/merchants?storeId=' + item.linkUrl.split('=')[1]
            });
        }else if(item.linkUrl.slice(0,4)=='http'){
           wx.navigateTo({
              url: '/pages/index/activity' 
            });
        }
        // StoreId
        // wx.navigateTo({
        //   url: '/shopping/checkout?id=' + 5556
        // });
  },
   GetEmw () {
    var that = this;
    var show;
    wx.scanCode({
      success: (res) => {
          console.log(res)
        this.show = "结果:" + res.result + "二维码类型:" + res.scanType + "字符集:" + res.charSet + "路径:" + res.path;
      
        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 2000
        })
        
      },
      fail: (res) => {
        wx.showToast({
          title: '失败',
          icon: 'success',
          duration: 2000
        })
      },
      complete: (res) => {
      }  
    })
  },
      toGoods(){
            wx.navigateTo({
          url: '../shopping/checkout?id=' + 5556
        //   /pages/shopping/checkout
        });
      },
    ...mapActions([
      'getIndexData'
    ]),
     ax(){
      
          this.$httpWX.get({
            url: 'buyer/HomePage',
            data: {}
          }).then(res => {
            console.log(res)
            this.items=res.data
          })
    },
 
    async getselectList () {
        
        let data=JSON.stringify({"pageIndex":this.page,"pageSize":"10"})
          
            const res = await api.NiceProduct({'data':data});
             this.selectList = this.selectList.concat(res.data);
                    if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt = true;
                    }else{
                        this.loadingBt = false;
                    }
           
}
  },
 
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: '商场首页',
      desc: 'zero商城',
      path: '/pages/index/index'
    }
  },
onPullDownRefresh(){
 wx.stopPullDownRefresh();
},
   
}
</script>

<style lang='scss'>
.banner {
  width: 100vw;
  height:43vw;
  img{
    width: 100%;;
    height:43vw;
  }
}
.titleSpan{
    height:60px;
    color:#333333;
    font-size:14px;
    line-height:60px;
    float: right;
img{
    margin: 0;
    margin-top: 28px;
    float: right;
}
}
.good-grid .more-a .icon{
  margin: 60rpx auto 0 auto;
  width: 70rpx;
  height: 70rpx;
}

.banner{
    // height: 43vw;;
    
}
.select{

    .title{
        text-indent: 15px;
           height: 55px;
            color: #333333;
            font-size: 14px;
            line-height: 55px;
            background: #fff;
            margin-bottom: 15px;
    }
 
 ul {
 
  font-size: 0;
  li {
    width: 44vw;
    margin-left: 4vw;
    margin-bottom:4vw;
    display: inline-block;
    background-color: #fff;
    // background:rgba(255,209,232,1);
box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.11);
    .bottom {
      width: 90%;
      margin: 0 auto;

    
    .pic {
      width: 48vw;
      height: 48vw;
    }
        p:nth-child(1) {
        color: #000;
        font-size: 12px;
        line-height: 14px;
          overflow: hidden;
          height: 28px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
            margin-bottom: 6px;
            margin-top:8px;
        }

  }     
  .MBprice{
      padding-bottom: 9px;
    
      span:nth-child(1){
          color: #FD6D1F;
          font-size: 14px;

      }
       span:nth-child(2){
          color: #333333;
          font-size: 12px;
         float:right;
      }
  }
  
  }
}
}
.container{background-color: #F5F5F5;}
.topic{
    margin-top: 15px;
    height: 55px;;
    img{
        width: 82px;
        height: 40px;;
        display: block; 
        float: left;
        margin-left: 15px;

    }
    background: #fff;

        .title-container{
            height: 55px;
            white-space: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            
           
        }
   
}
.age{
      height: 291px;
      background: #fff;;
    .title{
        margin-top: 15px;
        line-height: 45px;
        color: #333;
        background: #fff;
        border-bottom:1px solid rgba(0,0,0,0.1);
         }
    ul{
        width: 92vw;;
        margin: 0 auto;
        padding-top: 15px;
        li{
            float: left;
            width: 25%;
            text-align: center;

            img{
                width: 64px;
                height: 64px;;
            }
            p{
                line-height: 43px;
                font-size: 13px;
                text-align: center;
                color: #333333;

            }
        }
    }
   
}
 .navigations{
     ul{
         background: #fff;
         font-size: 0;
         padding-bottom: 15px;
         li{
             display: inline-block;
             width: 20%;
             font-size: 13px;
             color: #333333;
             padding-top: 15px;
             p{
                 text-align: center;
                 padding-top: 10px;
             }
             img{
                 display: block;
                 width: 39px;
                 margin: 0 auto;
                 height: 39px;
             }
         }
     }
 }
 .daysNew{
     background: #fff;
     margin-top: 15px;
        .icon{
            font-size: 17px;;
            margin-left: 15px;
            margin-right: 11px;
        }
        .title{
            height: 55px;
           color: #333333;
           font-size: 14px;
           line-height: 55px;
             span:nth-child(1){
                 font-size: 15px;
           }
           span:nth-child(2){
               float: right;
           }
           .icon1{
               font-size: 10px;
               margin-right: 20px;
               margin-left: 10px;
           }
        }
        .ulBox{
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            width: 100vw;;
            height: 115px;;
            overflow-y: hidden;
          }
        ul{
            font-size: 0;
            width:920px;
   
            height: 115px;;
            li{

                float: left;
                width: 80px;
                margin-left: 10px;
                img{
                    width: 80px;
                    height: 80px;
                    display: block;
                }
                p{
                    font-weight: bold;
                    line-height: 35px;
                    text-align: center;
                    color: #FD6D1F;
                    font-size: 12px;
                }

            }
        }
 }
 

.swiper-box {
   
    width: 100%;
    height: 43vw;;
    margin: 0 auto;
    text-align: center;
    .swiper-pagination-bullet-active{
        background-color: red;
    }
 
  }
 
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 18px ;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }


.search {
  z-index: 99;;
  height: 88rpx;
 
 padding-left: 4vw;
  background: #fff;
  display: flex;
  align-items: center;
  width: 100vw;
  box-sizing: border-box;
  position: fixed;
  left: 0;;
  top:0;
}

.search .input {
  width:83vw;
  height: 56rpx;
  background: #ededed;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.search .icon {
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png) center no-repeat;
  background-size: 100%;
  width: 28rpx;
  height: 28rpx;
}

.search .txt {
  height: 42rpx;
  line-height: 42rpx;
  color: #666;
  padding-left: 10rpx;
  font-size: 30rpx;
}


</style>
